<template>
    <layout-slot>
        <article class="main-content page-page">
            <div class="post-header">
                <h1 class="post-title" itemprop="name headline">
                    {{ pageInfo.title }} </h1>
                <div class="post-data">
                    <time datetime="2020-04-27T23:04:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                                           aria-hidden="true"> </i> {{ pageInfo.date |  dateFormat('{y}-{m}-{d}') }}
                    </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a href="#comments"> {{ comments }} 评论</a>&nbsp;&nbsp;
                    <i class="fa fa-eye" aria-hidden="true"></i> {{ pageInfo.view }} 浏览
                </div>
            </div>
            <div id="post-content" class="post-content">
                <ul class="flinks" style="margin-left: -5px">
                    <li v-for="item of links">
                        <a :title="item.description" :href="item.url" target="_blank">
                            <img alt="" :src="item.image">
                            {{ item.title }}
                        </a>
                    </li>
                </ul>
                <div v-html="pageInfo.intro"></div>
            </div>
        </article>
        <message/>
    </layout-slot>
</template>

<script>
    import LayoutSlot from "./slot/layout-slot";
    import Message from "@/components/Twikoo";
    import {getLink} from "@/api/linkFriend";
    import {getMoviesDetail, recordCount} from "@/api/home";
    import {mapState} from "vuex";

    export default {
        name: "links",
        components: {Message, LayoutSlot},
        data() {
            return {
                links: [],
                pageInfo: {
                    views: 0,
                    comments: 0,
                    data: "2021/12/09",
                    intro:""
                }
            }
        },
      computed:{
        ...mapState({
          comments:state => state.comments
        })
      },
        methods: {
            getLinkFriend() {
                getLink({type: 0}).then(({data}) => {
                    if (data.code === 200) {
                        this.links = data.data
                    }
                })
            },
            getPageInfo() {
              this.$store.commit("setLoading",true)
                getMoviesDetail({path: "/links"}).then(({data}) => {
                    this.pageInfo = {
                        intro: data.data.articleContent,
                        date: data.data.articleUpdated,
                        view: data.data.articleViewCount,
                        comments: data.data.articleCommentCount,
                        title: data.data.articleTitle
                    }
                  // 记录浏览量
                  recordCount({id: data.data.oId}).then((res) => {
                  })
                  this.$store.commit("setLoading",false)
                })
            }
        },
        mounted() {
            this.getLinkFriend()
            this.getPageInfo()
        }
    }
</script>

<style scoped>

</style>
